<template>
    <div class="ret">
        <div class="top">
            <p>{{this.$store.state.city}}</p>
            <div class="photo">
                头像图片
            </div>
            <div class="yonghu">
                用户名
            </div>
            <div class="geren1">
                <img :src="list[0]" alt="">
                个人主页</div>
        </div>
        <div class="main">
            <ul>
                <li>
                    <img :src="list[1]" alt="">个人资料
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  name: "geren",
  data() {
    return {
      list: [
        "/static/images/gren2.png",
        "/static/images/gren3.png",
        "/static/images/gren4.png",
        "/static/images/gren5.png",
        "/static/images/gren6.png",
        "/static/images/gren7.png",
        "/static/images/gren8.png"
      ]
    };
  }
};
</script>
<style scoped>
.top {
  width: 100%;
  height: 0;
  padding-bottom: 63.5%;
  background: url(/static/images/gerenbg.jpg) no-repeat 0 0;
  background-size: 100%;
}
.top p {
  padding-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
}
.top .photo {
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  margin-top: 2rem;
  text-align: center;
}
.top .yonghu {
  text-align: center;
  font-size: 1rem;
}
.top .geren1 {
  width: 30%;
  height: 2rem;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  margin: 0 auto;
  font-size: 1rem;
  text-align: center;
  line-height: 2rem;
  margin-top: 1rem;
}
.top .geren1 img {
  width: 18%;
}
</style>